<template>
  <AxiomVerticalLayout ref="verticalLayoutRef" class="chat-panel">
    <template #header>
      <div class="chat-header">
        <AxiomButton icon="Guide" @click="systemPromptDialogVisible = true">
          系统提示词
        </AxiomButton>
      </div>
    </template>
    <template #default>
      <AxiomGroup class="message-container" direction="vertical" gap="large">
        <AxiomGroup
          v-for="message in messages"
          :key="message.id"
          :justify="message.role === 'user' ? 'end' : 'start'"
        >
          <div class="message-content">
            <AxiomBlockquote v-if="message.role === 'user'">{{ message.content }}</AxiomBlockquote>
            <AxiomCode v-else :code="message.content" language="markdown" />
          </div>
        </AxiomGroup>
        <AxiomGroup v-if="loading" justify="start">
          <div class="message-content">
            <AxiomLoading text="思考中..." />
          </div>
        </AxiomGroup>
      </AxiomGroup>
      
      <AxiomDialog
        :model-value="systemPromptDialogVisible"
        title="编辑系统提示词"
        width="600px"
        @update:model-value="systemPromptDialogVisible = $event"
        @confirm="systemPromptDialogVisible = false"
      >
        <AxiomInput
          v-model="systemPrompt"
          type="textarea"
          :rows="10"
          placeholder="请输入系统提示词..."
        />
      </AxiomDialog>
    </template>
    <template #footer>
      <div class="chat-input-area">
        <AxiomInput
          v-model="newMessage"
          placeholder="请输入您的问题..."
          size="large"
          clearable
          @keyup.enter="handleSend"
        >
          <template #append>
            <AxiomButton type="primary" icon="Promotion" @click="handleSend" />
          </template>
        </AxiomInput>
      </div>
    </template>
  </AxiomVerticalLayout>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import { 
  AxiomInput, 
  AxiomButton, 
  AxiomBlockquote,
  AxiomCode,
  AxiomLoading,
  AxiomVerticalLayout,
  AxiomGroup,
  AxiomDialog,
} from 'axiom-view';

const props = defineProps({
  messages: {
    type: Array,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(['send-message']);

const newMessage = ref('');
const verticalLayoutRef = ref(null);
const systemPromptDialogVisible = ref(false);
const systemPrompt = ref('你是一个智能助手，请根据用户提供的上下文信息，用中文简洁地回答问题。');

function handleSend() {
  const content = newMessage.value.trim();
  if (!content) return;
  emit('send-message', {
    query: content,
    system_prompt: systemPrompt.value
  });
  newMessage.value = '';
}

watch(
  () => [...props.messages, props.loading],
  async () => {
    await nextTick();
    const container = verticalLayoutRef.value?.contentRef;
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  },
  { deep: true }
);
</script>

<style scoped lang="scss">
.chat-panel {
  flex: 1;
  min-height: 0;

  :deep(.axiom-vertical-layout__content) {
    padding: var(--axiom-spacing-lg);
  }
}

.chat-header {
  padding: var(--axiom-spacing-sm) var(--axiom-spacing-lg);
  border-bottom: 1px solid var(--axiom-border-color);
}

.message-content {
  max-width: 80%;
}

.chat-input-area {
  padding: var(--axiom-spacing-md) var(--axiom-spacing-lg);
  border-top: 1px solid var(--axiom-border-color);
}
</style> 